<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>顶部导航</title>
<!--  <link href="css/style.css" rel="stylesheet" type="text/css" />-->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <script src="bootstrap/js/bootstrap.js"></script>
  <style>
    .topleft {
      float: left;
      height: 88px;
      line-height: 88px;
      padding-left: 20px;
    }

    .topleft a {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      text-decoration: none;
    }

    .topright {
      float: right;
      padding-right: 20px;
      height: 88px;
      line-height: 88px;
    }

    .user-info {
      display: inline-block;
      margin-right: 20px;
      font-size: 16px;
    }

    .logout-btn {
      display: inline-block;
      background-color: #d9534f;
      color: white;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 15px;
    }

    .logout-btn:hover {
      background-color: #c9302c;
    }
  </style>
</head>

<body>
<div class="topleft">
  <a href="main.html" target="_parent">学生信息管理系统</a>
</div>

<div class="topright">
  <div class="user-info">
    欢迎：<span id="loginuser">admin</span>
  </div>
  <div class="logout-btn" onclick="exitSys()">
    退出登录
  </div>
</div>
</body>

<script>
  // 确保文档已完全加载
  $(function() {
    // 获取当前登录用户
    let loginuser = localStorage.getItem('account');
    if(loginuser) {
      $("#loginuser").text(loginuser);
    }
  });

  // 退出系统函数
  function exitSys() {
    // 显示确认对话框
    var isConfirm = confirm("确定要退出登录吗？");

    // 用户点击确认后才执行退出操作
    if (isConfirm) {
      // 清空localStorage中的所有数据
      localStorage.clear();

      // 显示提示信息
      alert("您已成功退出登录");

      // 重定向到登录页面
      window.parent.location.href = "login.html";
    }
  }
</script>
</html>
